<template>
  <div>
    <template>
      <standard-table
        :data-source="fineList"
        :columns="columns"
        :rowKey="(record) => record.fine_id"
        :loading="loading"
      >
        <div slot-scope="{record}" slot="status">
          <a-tag v-if="record.status == 1" color="green">Finished</a-tag>
          <!-- <a-tag v-else-if="record.status == 0" color="red">Please pay and return</a-tag> -->
        </div>
        <div slot="total_amount" slot-scope="{record}">
          {{record.total_amount}}$
        </div>
        <div slot="left" slot-scope="{record}">
          {{record.amount}}$
        </div>
        <div slot="actions" slot-scope="{record}">
          <a-button type="primary" @click="$router.push(`/user/borrowing/${record.borrowing_number}/detail`)">
            Detail
          </a-button>
        </div>
        <!-- <a-table-column title="payment time" data-index="payment_time"> </a-table-column> -->
      </standard-table>
    </template>
  </div>
</template>

<script>
const columns = [
  {
    dataIndex: 'book_name',
    key: 'book name',
    title: "Book name"
  },
  {
    dataIndex: 'ISBN',
    key: 'isbn',
    title: 'ISBN'
  },{
    dataIndex: 'pay_time',
    title: 'Pay time'
  },
  {
    title: "Status",
    scopedSlots: {customRender: 'status'}    
  },{
    title: "Total amount",
    dataIndex: "total_amount",
    scopedSlots: {customRender: 'total_amount'}
  },{
  },/*{
    title: "Left amount",
    scopedSlots: {customRender: 'left'}
  },{
  },*/{
    title: "Actions",
    scopedSlots: {customRender: 'actions'}
  }
]
import StandardTable from "@/components/table/StandardTable";
import { getAccessToken, getUserInfo } from "../../services/user";
import moment from 'moment'
export default {
  components: {StandardTable},
  data() {
    return {
      access_token: "",
      fineList: [],
      loading: true,
      columns,
      getOrderUrl: "https://1893791694056142.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/web-framework/express-app/getorder"
    };
  },
  created() {
    this.getHistory();
  },
  methods: {
    async getHistory() {
  let that = this;

  var myHeaders = new Headers();
  myHeaders.append("token", getAccessToken());
  myHeaders.append("Content-Type", "application/json");

  var myInit = { method: "GET", headers: myHeaders };

  var myRequest = new Request(
    this.$global.BASE_URL + "/api/user/fine/history",
    myInit
  );

  let tmpHistory;

  await fetch(myRequest)
    .then((response) => response.json())
    .then(function (data) {
      console.log("history", data);
      tmpHistory = data.data;

    })
    .catch((err) => console.log("Request Failed", err));
    console.log(tmpHistory);
  // 遍历历史数据，并为每个对象添加 "Book name"、"Borrow time" 和 "Total amount" 属性
  this.fineList = tmpHistory.map((item) => {
    return {
      ...item,
      "Book name": item.book_name,
      "ISBN":item.ISBN,
      "Total amount": item.total_amount,
      "pay_time":item.paymentTime.substring(0, 10)

    };
    
  });

  this.loading = false;
  
}

  
  },
};
</script>

<style></style>
